<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>模板语法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="demo">
        <h2>插值语法</h2>
        <!-- v-bind的标准语法 -->
        <a v-bind:href="url" v-bind:a="x" b="1+1" v-bind:c="1+1" d="url.toUpperCase()"
            v-bind:e="url.toUpperCase()">点我去尚硅谷学习</a>
        <h3>Hello,{{name}}</h3>
        <hr>
        <h3>指令语法</h3>
        <hr>
        <!-- v-bind的简写（以后都这么写） -->
        <a :href="url" :a="x" b="1+1" :c="1+1" d="url.toUpperCase()" :e="url.toUpperCase()">点我去尚硅谷学习</a>
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    new Vue({
        el: '#demo',
        data: {
            name: '张三',
            url: 'http://www.atguigu.com',
            x: 666
        }
    })
</script>

</html>